<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">  <span @click="handleClick">返回</span> 首页</div></nav-bar>
    <swipe :img="img" class="slide"></swipe>
    <recommend :rc_img="rc_img"></recommend>
    <tab-control class="tab-control" :titles="['外卖','日用品','生鲜']"></tab-control>
    <!-- <div class="tab">
      <router-link to="/home/takeaway" class="tab-control" 
                   :class="{active: index === currentIndex}" 
                   @click="tabClick(index)">
                   外卖
      </router-link>
      <router-link to="/home/necessary" class="tab-control" 
                   :class="{active: index === currentIndex}" 
                   @click="tabClick(index)">
                   日用品
      </router-link>
      <router-link to="/home/fresh" class="tab-control" 
                   :class="{active: index === currentIndex}" 
                   @click="tabClick(index)">
                   生鲜
      </router-link>
    </div> -->
    <keep-alive include="TakeAway,Necessary,Fresh">
      <router-view></router-view>
    </keep-alive>
    
    <!-- <tab-control class="tab-control" :titles="['外卖','日用品','生鲜']"></tab-control> -->
    <!-- <good-list :takeaway="takeaway"></good-list>  -->
   
  </div>
  
  
</template>


<script>

  import NavBar from '@/components/common/navbar/NavBar'
  import Swipe from '@/components/common/swiper/Swipe'
  import Recommend from '@/components/common/recommend/Recommend'
  import TabControl from '@/components/common/tabcontrol/TabControl'
  // import GoodList from '@/components/common/goods/GoodList'

  // import {getHomeGoods} from "@/networks/home"


  export default {
    name: "Home",
    components: {
      NavBar,
      Swipe,
      Recommend,
      TabControl,
      // GoodList
    },
    // activated: function () {
    //   this.$refs.hSwiper.startTimer()
    // },
    // deactivated: function () {
    //   this.$refs.hSwiper.stopTimer()
    // },
    data() {
      return {
        path: '/home/takeaway',
        currentIndex: 0,
        img:[
          {
            id: '0',
            imgUrl: require('@/assets/img/head1.jpg')
          },
          {
            id: '1',
            imgUrl: require('@/assets/img/head2.jpg')
          },
          {
            id: '2',
            imgUrl: require('@/assets/img/head3.jpg')
          }
        ],
        rc_img: [
          {
            id: '1',
            link: 'https://www.ele.me/',
            imgUrl: require('@/assets/img/ele.png'),
            title: '饿了么'
          },
          {
            id: '2',
            link: 'https://waimai.meituan.com/',
            imgUrl: require('@/assets/img/meituan.png'),
            title: '美团'
          },
          {
            id: '3',
            link: 'https://www.freshhema.com/',
            imgUrl: require('@/assets/img/hema.png'),
            title: '盒马生鲜'
          },
          {
            id: '4',
            link: 'https://www.chengxinyouxuan.com/',
            imgUrl: require('@/assets/img/youxuan.png'),
            title: '橙心优选'
          }
        ],
        
        // goods: {
        //   'pop': {page: 0, list: []},
        //   'new': {page: 0, list: []},
        //   'sell': {page: 0, list: []},
        // }
      }
    },
    methods: {
      tabClick(index) {
        this.currentIndex = index
      },

      handleClick(){
        this.$router.push({name: 'HomaePage'})
      }
    },
    // created() {
    //   console.log('cerate');
    //   this.$router.push(this.path);
    // },
    // activated() {
    //   console.log('active');
    //   this.$router.push(this.path);

    // },
    // deactivated() {
    //   console.log('deactive');
    // },
    // destroyed() {
    //   console.log('destroyed');
    // },
    // beforeRouteLeave(to, from, next){
    //   console.log(this.$route.path);
    //   this.path = this.$route.path; 
    //   next()
    // },
  
    
     

    
    // created() {
    //   getHomeGoods('pop', 1).then(res => {
    //     console.log(res)
    //   })
    // }
    // created() {
    //   this.getHomeMultidata();
    // },
  //   methods: {
  //     getHomeMultidata() {
  //       getHomeMultidata().then(res => {
  //         console.log(res)
  //         this.banners = res.data.banner.list;
  //         this.recommends = res.data.recommend.list;
  //       })
  //     },
  //     swiperload() {
  //       this.tabOffSetTop = this.$refs.tabcontrol2.$el.offsetTop
  //     }
  //   }
    
  }
</script>

<style scoped>

  span{
    position: absolute;
    left: 20px;
  }

  #home {
    padding-top: 44px;
  }

  

  .home-nav{
    background-color: #64b587;
    color: #fff;
    font-size: 18px;
    padding-left: 15px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .slide{
    width: 100%;
    flex-shrink: 0;
  }

  .slide img{
    width: 100%;
  }

  /* .tab {
    display: flex;
    
    text-align: center;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
  } */

  .tab-control {
    position: sticky;
    top: 44px;
    /* background-color: #fff; */
    /* flex: 1;
    font-size: 15px;
    color: black;
    text-decoration:none; */
    
  }

  /* .active {
    color: #64b587;
  } */
</style>